<template>
  <!--面包屑-->
<div style="margin-bottom: 30px">
 <el-breadcrumb separator="/">
   <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>
     <router-link to="/Approval/CcontractShow">承运合同审批管理</router-link>
   </el-breadcrumb-item>
   <el-breadcrumb-item>承运合同审批</el-breadcrumb-item>
 </el-breadcrumb>
</div>
   <div align="center" style="margin-top: 50px" >
<h2>承运合同审批</h2><br>
<table>
  <tbody>
<tr>
   <td>
<el-form-item label="合同标题：" style="font-size: 20px;float: right;" prop="contractTitle">
       <el-input v-model="form.contractTitle" style="width: 300px;height: 40px;" :disabled="true"
       placeholder="请输入合同标题" clearable />
     </el-form-item>
 
   </td>
   <td>
     <el-form-item label="承运单位" style="font-size: 20px;float: right;" prop="contractTitle">
       <el-input v-model="form.unit" style="width: 300px;height: 40px;" :disabled="true"
       placeholder="请输入承运单位" clearable />
     </el-form-item>
   </td>
 </tr>
 <tr>
   <td>
     <el-form-item label="承运负责人：" style="font-size: 20px;float: right;" prop="contractTitle">
       <el-input v-model="form.personCharge" style="width: 300px;height: 40px;" :disabled="true"
       placeholder="承运负责人：" clearable />
     </el-form-item>
   </td>
   <td>
     <el-form-item label="线路" style="font-size: 20px;float: right;" prop="contractTitle">
       <el-select v-model="form.lineName" placeholder="线路" style="width: 300px" :disabled="true">
                           <el-option v-for="item in line" :label="item" :value="item" />
     </el-select> 
    </el-form-item>
   </td>
 </tr>
 <tr>
   <td>
     <el-form-item label="吨运价" style="font-size: 20px;float: right;" prop="contractTitle">
       <el-input v-model="form.tonPrice" style="width: 300px;height: 40px;" :disabled="true"
       placeholder="吨运价" clearable />
     </el-form-item>
   </td>
   <td>
     <el-form-item label="包车条件吨位" style="font-size: 20px;float: right;" prop="contractTitle">
       <el-input v-model="form.ton" style="width: 300px;height: 40px;" :disabled="true"
       placeholder="请输入包车条件吨位" clearable />
     </el-form-item>
   </td>
 </tr>
 <tr>
   <td>
     <el-form-item label="包车金额：" style="font-size: 20px;float: right;">
       <el-input v-model="form.charteredBusPrice" style="width: 300px;height: 40px;" :disabled="true"
       placeholder="请输入包车金额" clearable />
     </el-form-item>
   </td>
  <td>
     <el-form-item label="经办人" style="font-size: 20px;float: right;">
       <el-input v-model="form.attn" style="width: 300px;height: 40px;" :disabled="true"
       placeholder="请输入经办人" clearable />
     </el-form-item>
   </td>
 </tr>
 <tr>
   <td>
     <el-form-item label="签订时间"   style="font-size: 20px;float: right;">
       <el-date-picker v-model="form.dateofSigning" type="date"  value-format="YYYY-MM-DD"
       placeholder="请选择签订时间" clearable  style="width: 300px;height: 40px;" :disabled="true"/>
     </el-form-item>
   </td>
     <td>
     <el-form-item label="合同金额" style="font-size: 20px;float: right;">
       <el-input v-model="form.contractAmount" style="width: 300px;height: 40px;" :disabled="true"
placeholder="合同金额" clearable />
     </el-form-item>
   </td>
 </tr>
 <tr>
   <td colspan="2">
     <el-form-item label="合同标的或项目说明" 
       style="font-size: 20px;width: 970px;height: 100px;float: right;" >
     <el-input v-model="form.contractNote" type="textarea" style="font-size: 20px;width: 970px;height: 100px;" :disabled="true"></el-input>
     </el-form-item>
     
   </td>
 </tr>
 <tr>
   <td colspan="2">
   
     <el-form-item label="合同主要条款/边更条款" 
       style="font-size: 20px;width: 970px;height: 100px;float: right;">
     <el-input v-model="form.contractTerms" type="textarea" style="font-size: 20px;width: 970px;height: 100px;" :disabled="true"></el-input>
     </el-form-item>
   </td>
 </tr>
 <tr >
   <td style="font-size: 20px;">合同文本(附件)：</td>
   <td>
       <el-upload
   v-model:file-list="fileList"
   class="upload-demo"
   action="http://10.223.8.15:8000/hwrite/api/Contract/Upfile"
   multiple
   :limit="3"
   :on-success="handleSuccess"
   :disabled="true"
 >
   <el-button type="primary" :disabled="true">选取文件</el-button>
 
 </el-upload>
     <span>（单个附件最大支持20M，支持：PDF、Word、Excel、Txt格式）</span> 
   </td>
 </tr>
</tbody>
</table>

<el-form
   ref="ruleFormRef"
   style="max-width: 600px"
   :model="formadd"
   label-width="auto"
   class="demo-ruleForm"
   status-icon
 >
 <el-form-item label="审批备注" prop="approvalNotes" >
     <el-input v-model="formadd.approvalNotes" type="textarea" />
   </el-form-item>
     <el-form-item label="转批人" prop="subgrantor">
     <el-select v-model="formadd.subgrantor" placeholder="转批人" style="width: 300px">
                           <el-option v-for="item in username" :label="item.name" :value="item.name" />
                       </el-select> 
   </el-form-item>
   <el-form-item>
   <el-button type="primary" @click="Submit" 
       style="width: 150px;height: 50px;">通过并转批</el-button>
       <el-button  @click="Cancel" style="width: 150px;height: 50px;"
       >拒绝</el-button>
       <el-button type="success" @click="onSubmit" 
       style="width: 150px;height: 50px;">通过并终止审批</el-button>
   </el-form-item>
</el-form>
</div>
</template>
<script setup lang='ts'>
import axios  from 'axios';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ref, reactive, onMounted,watch } from 'vue'; 
import { useRouter, useRoute } from 'vue-router';
const route = useRoute();
const router = useRouter();
//变量
const form=reactive({
   contractId:route.query.ContractId,
   contractTitle:'',//合同标题
    unit:'',//单位
   personCharge:'',//负责人
   lineId:1,//线路
   lineName:'',//线路名称  
   tonPrice:'',//吨价
   ton:'',//吨数
   charteredBusPrice:'',//包车金额
   attn:'',//经办人
   dateofSigning:'',//签订日期
   contractAmount:'',//合同金额
   contractNote:'',//合同标的或项目说明
   contractTerms:'',//合同主要条款/变更条款
   contractText:'',//合同文本
    contractNumber:'',//合同编号
    ccontractStatus:0,//合同状态
   contractClassification:1,//合同分类
   updatedBy:'admin',//更新人
   updatedDate:new Date(),//更新时间
   createdBy:'admin',//创建人
   createdDate:new Date(),//创建时间
   deletedBy:'admin',//删除人
   deletedDate:new Date(),//删除时间
})
//上传文件
const handleSuccess=(any:any)=>{
console.log(any);
form.contractText=any;
}
//线路
const line = ref([]);
const getLine = () => {
   axios.get("/hread/api/ContractRead/Getlines").then((res) => {
       line.value = res.data.list.map((o) => o.lineName);
   });
};
//反填
const backfill=()=>{
   axios.get('/hread/api/ContractRead/BackfillTshowContract', {
       params: {
         ContractId: route.query.ContractId
       }
     }).then(res => {
 form.contractTitle=res.data.data.contractTitle
     form.unit=res.data.data.unit
     form.personCharge=res.data.data.personCharge
     form.lineId=res.data.data.lineId
     form.tonPrice=res.data.data.tonPrice
     form.ton=res.data.data.ton
     form.lineName=res.data.data.lineName
     form.charteredBusPrice=res.data.data.charteredBusPrice
     form.attn=res.data.data.attn
     form.dateofSigning=res.data.data.dateofSigning
     form.contractAmount=res.data.data.contractAmount
     form.contractNote=res.data.data.contractNote
     form.contractTerms=res.data.data.contractTerms
     form.contractText=res.data.data.contractText
     form.contractNumber=res.data.data.contractNumber
     form.ccontractStatus=res.data.data.ccontractStatus
     form.contractClassification=res.data.data.contractClassification
     form.updatedBy=res.data.data.updatedBy
     form.updatedDate=res.data.data.updatedDate
     form.createdBy=res.data.data.createdBy
     form.createdDate=res.data.data.createdDate
     form.deletedBy=res.data.data.deletedBy
     form.deletedDate=res.data.data.deletedDate
    localStorage.setItem('contractText',res.data.data.contractText)
    kk()
  
   })
}
//用户信息查询
 const forms: any = reactive({
   phone: '',
   login_flag: -1,
   name: '',
   no:'',
   pageIndex: 1,
   pageSize: 5,
   totalPage: 0,
   totalCount: 0,
 })
   //用户列表
const UserInfoData: any = ref([])
 const username=ref([])
 const getUserInfoList = () => {
 
   axios.get('http://1.117.93.87:8000/rbacdu/api/User/userShow', {
     params: {
       phone: forms.phone,
       login_flag: forms.login_flag,
       name: forms.name,
       no: forms.no,
       pageIndex: forms.pageIndex,
       pageSize: forms.pageSize,
     }
   }).then(res=>{
     console.log(res);
     UserInfoData.value = res.data.data.list;
     forms.totalPage = res.data.data.pageCount;
     forms.totalCount = res.data.data.totalCount;
     username.value = UserInfoData.value.filter(o => o.name != localStorage.getItem('username'));
         
   }).catch(err=>{
     console.log(err);
     
   })    
 }

const fileList=ref()
const kk=()=>{
const fileLists = ref([
 {
       name: localStorage.getItem('contractText'),
       url:'/hread/wwwroot/file/'+localStorage.getItem('contractText'),
}
])
fileList.value=fileLists.value
console.log(fileList.value)
}
//审批表变量
const formadd=reactive({
   approvalResult:'',
   approvalNotes:'',
   approver:'',
   contractId:'',
   subgrantor:''
})
//同意
const onSubmit = () => {
 let hh={
   approvalResult:"同意",
   approvalNotes:formadd.approvalNotes,
   approver:localStorage.getItem('username'),
   contractId:route.query.ContractId,
   subgrantor:formadd.subgrantor,
}
axios.post('/hwrite/api/Contract/CrerateAppro',hh).then(res=>{
       if(res.data.data>0){
        ElMessage({
          message: '已通过',
         type: 'success',
       })
       router.push('/Approval/CcontractShow')
      }else{
        ElMessage.error('修改失败')
       }
   })
}
//转批
const Submit=()=>{
 let hh={
   approvalResult:"同意并转批",
   approvalNotes:formadd.approvalNotes,
   approver:localStorage.getItem('username'),
   contractId:route.query.ContractId,
   subgrantor:formadd.subgrantor,
}
axios.post('/hwrite/api/Contract/CrerateAppro',hh).then(res=>{
       if(res.data.data>0){
        ElMessage({
          message: '已通过并转批',
         type: 'success',
       })
       router.push('/Approval/CcontractShow')
      }else{
        ElMessage.error('修改失败')
       }
   })
}
//拒绝
const Cancel=()=>{
let hh={
   approvalResult:"拒绝",
   approvalNotes:formadd.approvalNotes,
   approver:localStorage.getItem('username'),
   contractId:route.query.ContractId,
   subgrantor:formadd.subgrantor,
 }
console.log(hh) 
axios.post('/hwrite/api/Contract/CrerateAppro',hh).then(res=>{
       if(res.data.data>0){
        ElMessage({
          message: '已拒绝',
         type: 'success',
       })
       router.push('/Approval/CcontractShow')
      }else{
        ElMessage.error('修改失败')
       }
   })

}
// const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
//    alert(1)
// console.log(file, uploadFiles)
// }

// const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
//     alert(2)
//   console.log(uploadFile)

// }

// const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
//     alert(3)
//     ElMessage.warning(
//     `The limit is 3, you selected ${files.length} files this time, add up to ${
//       files.length + uploadFiles.length
//     } totally`
//   )
// }

// const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
//     alert(4)
//   return ElMessageBox.confirm(
//     `确定删除吗 ${uploadFile.name} ?`
//   ).then(
//     () => true,
//     () => false
//   )
// }
//钩子函数
onMounted(()=>{
   backfill()//反填货主合同信息
 getLine()//获取线路
 getUserInfoList()//获取用户信息

}
)
</script>


